.searchContainer {
  padding-top: 6.25rem;

  .actorInfo {
    @apply bg-bg25 rounded-lg p-4 mt-4 flex relative overflow-hidden;
    width: calc(100% - 0.75rem);
    height: 20.25rem;

    .actorHead {
      @apply w-full rounded shrink-0;
      width: 13.5rem;
      margin-right: 5.5rem;
    }

    .name {
      @apply font-semibold text-white block w-fit;
      margin-top: 3.125rem;
      margin-bottom: 1.875rem;
      font-size: 1.625rem;
      line-height: 1.625rem;
    }

    .info {
      @apply text-lg leading-7 mb-7 overflow-hidden text-ellipsis text-white-60;
      max-height: 6.25rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    .actorDetail {
      @apply bg-white-10;
      width: 8.5rem;
      height: 2.875rem;

      &:hover {
        @apply bg-white-40;
      }

      & > span {
        @apply text-white-80 text-lg font-medium;
        line-height: 1.125rem;
      }
    }

    &.actorInfoLast {
      @apply mb-10;
    }
  }

  .title {
    @apply h-24 mt-5 h-6 flex items-center pr-3;

    .searchText {
      @apply inline text-white font-bold;
      font-size: 1.5rem;
      line-height: 1.5rem;
    }

    .searchTip {
      @apply self-end text-sm leading-5 text-c99;

      & > span {
        @apply text-theme;
      }
    }
  }

  .filterItem {
    @apply mt-5 flex flex-wrap w-full;
    min-height: calc(100vh - 29.375rem);

    .item {
      @apply rounded bg-bg25 mr-3 mb-3 flex relative overflow-hidden;
      height: 21rem;

      .poster {
        @apply absolute w-full h-full top-0 left-0 z-1;
      }

      .mask {
        @apply w-full h-full absolute z-1;

        &::before {
          @apply absolute h-full left-0 top-0;
          width: 42%;
          background-color: rgba(0, 0, 0, 0.7);
          content: '';
        }

        &::after {
          @apply absolute h-full right-0 top-0;
          width: 58%;
          background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(38, 38, 38, 0) 100%);
          content: '';
        }
      }

      .info {
        @apply absolute w-full h-full top-0 left-0 z-2 text-white-60 overflow-hidden pr-4;
        padding-left: 1.9375rem;

        .markBox {
          @apply flex;
          margin-top: 2.875rem;
          margin-bottom: 0.625rem;

          .mark {
            @apply text-sm text-white-80 flex items-center mr-2;
            height: 0.875rem;
            line-height: 0.875rem;

            .tmdb {
              @apply w-6 h-4 mr-1;
            }

            .douban {
              @apply mr-1;
              width: 0.875rem;
              height: 0.875rem;
            }
          }
        }

        .infoName {
          @apply text-white font-semibold block;
          font-size: 1.625rem;
          line-height: 1.625rem;
        }

        .infoTag {
          @apply text-xs leading-3 text-white mt-6;
          margin-bottom: 0.375rem;
        }

        .infoCount {
          @apply text-xs leading-3;

          & > span:first-child {
            @apply mr-5;
          }

          margin-bottom: 0.625rem;
        }

        .infoDesc {
          @apply leading-6 text-sm overflow-hidden text-ellipsis;
          margin-bottom: 1.875rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .btn {
          @apply bg-white;
          width: 8.75rem;
          height: 2.875rem;

          &:hover {
            @apply bg-white-60;
          }

          & > span {
            @apply font-semibold;
          }

          &.btnDetail {
            &:hover {
              @apply bg-white-40;
            }

            @apply bg-white-10 ml-4;

            & > span {
              @apply text-white;
            }
          }
        }
      }
    }
  }

  .searchPagination {
    @apply mt-20;
  }
}

.loading {
  @apply w-full text-center;
  margin-top: 12.5rem;
}

// 最大屏幕1920及以上
@media screen and (min-width: 1920px) {
  .filterItem {
    .item {
      width: 596px;
    }
  }
}

// 三个
@media screen and (min-width: 1313px) and (max-width: 1919px) {
  .filterItem {
    .item {
      width: calc((100vw - 132px) / 3);
    }
  }
}

// 两个
@media screen and (min-width: 767px) and (max-width: 1312px) {
  .filterItem {
    .item {
      width: calc((100vw - 120px) / 2);
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .searchContainerPhone {
    .title {
      @apply px-4;

      .searchText {
        @apply text-xl leading-5 mr-0;
      }
    }

    .actorInfo {
      @apply rounded p-0 m-0 mb-3 ml-4;
      width: calc(100vw - 32px);
      height: 194px;
      .actorHead {
        @apply mr-4;
        width: 146px;
        height: 194px;
      }

      .name {
        @apply mt-3 mb-4 text-base leading-5 block;
      }

      .info {
        @apply text-sm leading-5 mb-4;
      }

      .actorDetail {
        width: 100px;
        height: 36px;

        & > img {
          @apply w-4 h-4;
        }
        & > span {
          @apply text-sm;
        }
      }

      &.actorInfoLast {
        @apply mb-4;
      }
    }

    .filterItem {
      @apply mt-4 px-4 w-full;
      .item {
        @apply w-full mr-0;
        height: 240px;
        .poster {
          @apply absolute w-full h-full top-0 left-0 z-1;
        }

        .mask {
          @apply w-full h-full absolute z-1;

          &::before {
            @apply absolute h-full left-0 top-0;
            width: 41.946%;
            background-color: rgba(0, 0, 0, 0.7);
            content: '';
          }

          &::after {
            @apply absolute h-full right-0 top-0;
            width: 58.054%;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(38, 38, 38, 0) 100%);
            content: '';
          }
        }

        .info {
          @apply px-1;
          .markBox {
            @apply mt-4 mb-3;
          }

          .infoName {
            @apply text-xl;
          }

          .infoTag {
            @apply mt-4;
          }

          .infoDesc {
            @apply mb-5;
          }

          .btn {
            @apply h-9 w-24;
          }
        }
      }
    }
    .searchPagination {
      @apply mt-4;
    }
  }
}
